import Link from 'next/link';

const Header = () => {
  return (
    <header className="bg-gray-900 text-white shadow-lg sticky top-0 z-50">
      <div className="container mx-auto px-6 py-4 flex justify-between items-center">
        <Link href="/" className="text-2xl font-bold tracking-tight hover:text-cyan-400 transition-colors duration-300">
          艺智枢纽 <span className="text-cyan-400">AI</span>
        </Link>
        <nav className="space-x-6 flex items-center">
          <Link href="/" className="hover:text-cyan-400 transition-colors duration-300">
            首页
          </Link>
          {/* <Link href="/categories" className="hover:text-cyan-400 transition-colors duration-300">
            应用分类
          </Link> */}
          <div className="relative">
            <input 
              type="search" 
              placeholder="搜索应用..." 
              className="bg-gray-800 text-white px-4 py-2 rounded-full focus:outline-none focus:ring-2 focus:ring-cyan-500 transition-all duration-300 w-48 sm:w-64"
            />
            {/* Search icon could be added here */}
          </div>
          <div className="w-8 h-8 bg-cyan-500 rounded-full flex items-center justify-center text-gray-900 font-semibold">
            {/* Placeholder for user avatar/initials */}
            U
          </div>
        </nav>
      </div>
    </header>
  );
};

export default Header;
